<template>
	<view class="app">
		<u-form :model="formData" ref="uForm" :error-type="errorType" label-position="top">
			<u-form-item prop="userno" label="统一社会信用代码" required>
				<u-input type="text" maxlength=40 placeholder="统一社会信用代码" confirmType="next"
					v-model="formData.userno" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="xukezhenghao" label="食品经营许可证号" required>
				<u-input type="text" maxlength=40 placeholder="食品经营许可证号" confirmType="next"
					v-model="formData.xukezhenghao" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="username" label="单位名称" required>
				<u-input type="text" placeholder="单位名称" confirmType="next"
					v-model="formData.username" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="faren" label="法定代表人" required>
				<u-input type="text" placeholder="法定代表人姓名" confirmType="next"
					v-model="formData.faren" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="farentel" label="法定代表人电话" required>
				<u-input type="number" maxlength=11 placeholder="法定代表人电话" confirmType="next"
					v-model="formData.farentel" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="jingyingdizhi" label="单位地址" required>
				<u-input type="text" placeholder="单位地址" confirmType="next"
					v-model="formData.jingyingdizhi" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="cityText" label="所属城市" required>
				<u-input type="select" border trim v-model="formData.cityText" placeholder="选择单位所在城市"
					@click="showCity = true" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="lianxiren" label="单位联系人" required>
				<u-input type="text" placeholder="单位联系人姓名" confirmType="next"
					v-model="formData.lianxiren" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="lianxirentel" label="单位联系人电话" required>
				<u-input type="number" maxlength=11 placeholder="单位联系人电话" confirmType="next"
					v-model="formData.lianxirentel" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="personQuantity" label="从业人员数量" required>
				<u-input type="number" maxlength=5 placeholder="从业人员数量" confirmType="next"
					v-model="formData.personQuantity" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="fsd" label="食品安全总监" required>
				<u-radio-group v-model="formData.fsd" :disabled="disabledInput">
					<u-radio v-for="dict in fsdOptions" :key="dict.dictValue" :name="dict.dictValue"
						:disabled="item.disabled" icon-size="36" label-size="28">
						{{dict.dictLabel}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item v-show="formData.fsd == 1" prop="fsdName" label="总监姓名" required>
				<u-input type="text" placeholder="总监姓名" confirmType="next"
					v-model="formData.fsdName" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item v-show="formData.fsd == 1" prop="fsdTel" label="总监联系电话" required>
				<u-input type="number" maxlength=11 placeholder="总监联系电话" confirmType="next"
					v-model="formData.fsdTel" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="operatingArea" label="经营面积" required>
				<u-input type="text" placeholder="经营面积" confirmType="next"
					v-model="formData.operatingArea" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="cuisine" label="主打菜系">
				<u-input type="textarea" autoHeight placeholder="主打菜系" confirmType="next"
					v-model="formData.cuisine" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="jianguanjiguan" label="辖区市场监管部门">
				<u-input type="text" placeholder="辖区市场监管部门" confirmType="next"
					v-model="formData.jianguanjiguan" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="jianguanjiguantel" label="监管部门电话">
				<u-input type="text" placeholder="监管部门电话" confirmType="next"
					v-model="formData.jianguanjiguantel" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="danweijieshao" label="单位介绍（基本情况及社会荣誉）" required>
				<u-input type="textarea" autoHeight placeholder="单位介绍" confirmType="next"
					v-model="formData.danweijieshao" border trim :styles="styles"
					:placeholderStyle="placeholderStyle" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="danweixingzhiText" label="单位性质" required>
				<u-input type="select" border trim v-model="formData.danweixingzhiText" placeholder="单位性质"
					:styles="styles" :placeholderStyle="placeholderStyle"
					@click="showDanweixingzhi = true" :disabled="disabledInput" />
			</u-form-item>
			<u-form-item prop="jingyingmoshiText" label="经营模式" required>
				<u-input type="select" border trim v-model="formData.jingyingmoshiText" placeholder="经营模式"
					:styles="styles" :placeholderStyle="placeholderStyle"
					@click="showJingyingmoshi = true" :disabled="disabledInput" />
			</u-form-item>
		</u-form>
		
		<u-select v-model="showCity" mode="mutil-column-auto" :list="cityOptions" value-name="bianma"
			label-name="mingcheng" @confirm="confirmCity">
		</u-select>	
		<u-select v-model="showDanweixingzhi" mode="single-column" :list="danweixingzhiOptions" value-name="dictValue"
			label-name="dictLabel" @confirm="confirmDanweixingzhi">
		</u-select>
		<u-select v-model="showJingyingmoshi" mode="single-column" :list="jingyingmoshiOptions" value-name="dictValue"
			label-name="dictLabel" @confirm="confirmJingyingmoshi">
		</u-select>
		
		<view class="btn-bar">
			<u-button v-if="!disabledInput" type="primary" shape="square" :loading="loading" :disabled="disabled" @click="submit">提交</u-button>
			<u-button v-else type="primary" shape="square" @click="toPage('./attachment?id='+formData.id)">下一步</u-button>
		</view>
	</view>
</template>

<script>
	import config from '@/app.config.js'
	
	export default {
		data() {
			let formData = {
				id: null,
				userno: null,
				xukezhenghao: null,
				username: null,
				faren: null,
				farentel: null,
				jingyingdizhi: null,
				shi: null,
				qu: null,
				lianxiren: null,
				lianxirentel: null,
				personQuantity: null,
				fsd: '0',
				fsdName: null,
				fsdTel: null,
				operatingArea: null,
				cuisine: null,
				jianguanjiguan: null,
				jianguanjiguantel: null,
				danweijieshao: null,
				danweixingzhi: null,
				jingyingmoshi: null,
				openid: null,
				yuyuedate: null,
				
				danweixingzhiText: null,
				jingyingmoshiText: null,
				cityText: null,
			}
			return {
				disabled: false, // 提交中
				loading: false, // 提交中
				
				openid: '',
				
				formData,
				
				fsdOptions: getApp().globalData.fsdOptions,
				danweixingzhiOptions: getApp().globalData.danweixingzhiOptions, // 单位性质
				jingyingmoshiOptions: getApp().globalData.jingyingmoshiOptions, // 经营模式
				cityOptions: getApp().globalData.cityOptions,
				
				showCity: false,
				showDanweixingzhi: false,
				showJingyingmoshi: false,
				
				rules: {
					"userno": [{
						"required": true,
						message: '请输入统一社会信用代码',
						trigger: ['change', 'blur'],
					}],
					"xukezhenghao": [{
						"required": true,
						message: '请输入食品经营许可证号',
						trigger: ['change', 'blur'],
					}],
					"username": [{
						"required": true,
						message: '请输入单位名称',
						trigger: ['change', 'blur'],
					}],
					"faren": [{
						"required": true,
						message: '请输入法定代表人',
						trigger: ['change', 'blur'],
					}],
					"farentel": [{
						"required": true,
						message: '请输入法定代表人电话',
						trigger: ['change', 'blur'],
					}
					// , {
					// 	validator: (rule, value, callback) => {
					// 		return this.$u.test.mobile(value);
					// 	},
					// 	message: '法定代表人电话号码格式错误',
					// 	trigger: ['blur'],
					// }
					],
					"jingyingdizhi": [{
						"required": true,
						message: '请输入单位地址',
						trigger: ['change', 'blur'],
					}],
					"cityText": [{
						"required": true,
						message: '请选择单位所在城市',
						trigger: ['change', 'blur'],
					}],
					"lianxiren": [{
						"required": true,
						message: '请输入单位联系人',
						trigger: ['change', 'blur'],
					}],
					"lianxirentel": [{
						"required": true,
						message: '请输入单位联系人电话',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '单位联系人电话号码格式错误',
						trigger: ['blur'],
					}],
					"personQuantity": [{
						"required": true,
						message: '请输入从业人员数量',
						trigger: ['change', 'blur'],
					}],
					// "fsdName": [{
					// 	"required": true,
					// 	message: '请输入食品安全总监姓名',
					// 	trigger: ['change', 'blur'],
					// }],
					// "fsdTel": [{
					// 	"required": true,
					// 	message: '请输入总监联系电话',
					// 	trigger: ['change', 'blur'],
					// }, {
					// 	validator: (rule, value, callback) => {
					// 		return this.$u.test.mobile(value);
					// 	},
					// 	message: '总监联系电话号码格式错误',
					// 	trigger: ['blur'],
					// }],
					"operatingArea": [{
						"required": true,
						message: '请输入经营面积',
						trigger: ['change', 'blur'],
					}],
					// "cuisine": [{
					// 	"required": true,
					// 	message: '请输入主打菜系',
					// 	trigger: ['change', 'blur'],
					// }],
					// "jianguanjiguan": [{
					// 	"required": true,
					// 	message: '请输入辖区市场监管部门',
					// 	trigger: ['change', 'blur'],
					// }],
					// "jianguanjiguantel": [{
					// 	"required": true,
					// 	message: '请输入监管部门电话',
					// 	trigger: ['change', 'blur'],
					// }],
					"danweijieshao": [{
						"required": true,
						message: '请输入单位介绍',
						trigger: ['change', 'blur'],
					}],
					"danweixingzhiText": [{
						"required": true,
						message: '请选择单位性质',
						trigger: ['change', 'blur'],
					}],
					"jingyingmoshiText": [{
						"required": true,
						message: '请选择经营模式',
						trigger: ['change', 'blur'],
					}],
				},
				// 文字和下划线提示
				errorType: ['message', 'border-bottom'],
				placeholderStyle: "",
				styles: {},
				disabledInput: false,
			}
		},
		onLoad(options) {
			this.initPage(options);
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async initPage(options = {}){
			},
			toPage(url) {
				vk.navigateTo(url)
			},
			// 选中单位性质
			confirmDanweixingzhi(e) {
				this.formData.danweixingzhiText = e[0].label;
				this.formData.danweixingzhi = e[0].value;
			},
			// 选中经营模式
			confirmJingyingmoshi(e) {
				this.formData.jingyingmoshiText = e[0].label;
				this.formData.jingyingmoshi = e[0].value;
			}, 
			// 选中城市
			confirmCity(e){
				this.formData.shi = e[0].label;
				this.formData.qu = e[1].label;
				this.formData.cityText = e[0].label + ' ' + e[1].label;
			},
			/**
			 * 验证表单并提交
			 */
			submit() {
				if (config.debug) console.log('验证表单', this.formData)
				
				this.disabled = true;
				this.loading = true;
				
				this.$refs.uForm.validate(valid => {
					if (config.debug) console.log('验证valid', valid)
					if (valid) {
						this.submitForm()
					} else {
						this.disabled = false;
						this.loading = false;
					}
				});
			},
			submitForm() {
				this.formData.openid = '小程序申报'
				vk.callFunction({
					url: 'client/sakj/pub.lhfj.apply1',
					data: this.formData
				})
				.then(res => {
					if (config.debug) console.log('提交res', res);
					vk.toast("提交成功，请下载模板后盖章上传", "none", () => {
						this.loading = false;
						this.toPage('./attachment?id=' + res.data)
					}); 
				})
				.catch(err => {
					if (config.debug) console.log('提交err', err);
					this.disabled = false;
					this.loading = false;
				})
			},
		}
	}
</script>

<style>
	.btn-bar{
		margin-top: 10px;
	}
</style>
